<template>
  <KView class="location-setting">
    <KView class="location-setting-header">
      <span class="location-setting-header-title">定位</span>
      <KView class="location-setting-close" @click="toClose">
        <sys-svg name="close" color="#000000"></sys-svg>
      </KView>
    </KView>

    <KView class="location-setting-position">
      <KView class="location-setting-position-title">当前定位</KView>
      <KView class="location-setting-position-text clearfix">
        <KView class="location-setting-position-icon">
          <sys-svg name="location2" color="#00A6FF"></sys-svg>
        </KView>
        <KView v-if="loading">定位中</KView>
        <KView v-else>{{locationText}}</KView>
        <KView class="location-setting-btn" @click="toSettingLocation">重新定位</KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysSvg from 'common/sysSvg';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],

    computed: {
      locationText() {
        let location = this.location;
        if (location === null) {
          return null;
        }
        let locationData = location.locationData;
        if (locationData === null) {
          return locatlocationDataion.locationMsg;
        }
        return locationData.locationText;
      }
    },

    data() {
      return {
        loading: false
      };
    },

    methods: {
      toSettingLocation() {
        this.$api.getSetting({
          success: res => {
            if (res.authSetting['scope.userLocation']) {
              this.$emit('reset-location', this);
              return;
            }
            this.toSettingAuth();
          }
        });
      },

      toSettingAuth() {
        this.$api.showModal({
          content: '检验到您没打开地理位置授权，是否去设置打开？',
          confirmText: '设置',
          success: res => {
            if (res.confirm) {
              this.$api.openSetting({
                success: res => {
                  this.$emit('reset-location', this);
                }
              });
            }
          }
        });
      },

      toClose() {
        this.$emit('close');
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .location-setting {
    height: calc(100% - #{formatPx(30)});
    padding: formatPx(30) 0;
    background: #ffffff;
    overflow: auto;

    .location-setting-header {
      height: formatPx(40);
      padding: 0 formatPx(30);
      margin-bottom: formatPx(30);
      text-align: center;
      position: relative;

      .location-setting-header-title {
        font-size: formatPx(40);
        line-height: formatPx(40);
      }

      .location-setting-close {
        position: absolute;
        top: 0;
        left: formatPx(30);
        width: formatPx(40);
        height: formatPx(40);
      }
    }

    .location-setting-position {
      padding: 0 formatPx(30);

      .location-setting-position-title {
        font-size: formatPx(28);
        color: #a0a0a0;
      }

      .location-setting-position-text {
        margin-top: formatPx(26);
        font-size: formatPx(32);
        height: formatPx(36);
        line-height: formatPx(36);

        >div {
          float: left;
          height: 100%;
        }

        .location-setting-position-icon {
          width: formatPx(26);
          margin-right: formatPx(12);
        }

        .location-setting-btn {
          float: right;
          color: #00A6FF;
        }
      }
    }
  }

</style>
